<template>
  <div class="wrap">
    <!-- todo 头部 -->
    <header class="wrap">
      <router-link tag="div" to="/search" class="search">
        <div class="search_logo"></div>
        <div class="text">搜索产品</div>
      </router-link>
      <router-link tag="div" to="/car" class="car"></router-link>
    </header>
    <!-- todo 头部 -->

    <!-- todo 主体 -->
    <main class="wrap">
      <div class="mains">
        <router-link
          tag="img"
          :to="'shopList?type=' + vl.type"
          v-for="(vl, i) in indexList"
          :key="i"
          :src="vl.imgUrl"
          alt=""
        />
      </div>
    </main>
    <!-- todo 主体 -->

    <!-- todo 尾部 -->
    <footer>
      <div class="text1 text">工信部备案· &nbsp; 苏ICP备11069023号-3</div>
      <div class="text2 text">增值电信业务经营许可证·苏B1-20110038</div>
      <div class="text3 text">
        ?2014-2022 江阴新风尚电子商务有限公司 版权所有 HLA Inc. All Rights
        Reserved.
      </div>
    </footer>
    <!-- todo 尾部 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexList: [
        {
          type: "道法自然系列",
          imgUrl: require("../assets/imgs/mains.jpg"),
        },
        {
          type: "明星同款",
          imgUrl: require("../assets/imgs/mains1.jpg"),
        },
        {
          type: "道法自然系列",
          imgUrl: require("../assets/imgs/mains2.jpg"),
        },
        {
          type: "夹克",
          imgUrl: require("../assets/imgs/mains3.jpg"),
        },
        {
          type: "IP联合",
          imgUrl: require("../assets/imgs/mains4.jpg"),
        },
      ],
    };
  },
  methods: {},
  created() {
    this.$emit("show");
  },
};
</script>

<style lang="scss" scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 10px;
  position: sticky;
  top: -1px;

  .search {
    display: flex;
    flex: 1;
    height: 30px;
    margin: 9px 33px;
    border: 1px solid #e5e5e5;
    align-items: center;
    justify-content: center;
    color: #707070;
    font-size: 13px;

    > .search_logo {
      background: url(http://www.hlamall.cn/img/mobile-site/gobal/search_cio.png) no-repeat;
      background-size: contain;
      margin-right: 10px;
      width: 13px;
      height: 13px;
    }
  }

  > .car {
    width: 23px;
    height: 18px;
    background: url(../assets/imgs/cart.png) no-repeat;
    background-size: contain;
  }
}

main {
  > .mains {
    width: 100%;

    > img {
      display: block;
      width: 100%;
    }
  }
}

footer {
  padding-bottom: 180px;

  > .text {
    text-align: center;
    font-size: 11px;
  }

  > .text3 {
    margin: 0 27px;
  }
}
</style>